<script setup lang="ts">
import { ref, computed } from 'vue'
import type { Ref, ComputedRef } from 'vue'
import { showConfirmDialog } from 'vant';
import { useRouter, useRoute } from 'vue-router'


// this.$router  = router
// this.$route   = route
const router = useRouter()
const route = useRoute()

// tel 就是用户输入的手机号
const tel: Ref<string> = ref('')

// 验证手机号是否合法，当输入的是合法手机号就可以点击下一步
let flag: ComputedRef<boolean> = computed(() => {
  if (/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(tel.value)) {
    return false
  } else {
    return true
  }
})

// 验证手机号是否被注册过
// 注册过就提示用户已被注册
// 没有被注册那就发送验证码然后进入页面
function checkTel() {
  router.push('/register/step2')
  // this.$router  = router
  // this.$route   = route
  // router.push('/register/step2')

  // 发送请求来验证当前手机号是否已经存在
//   getCheckPhone({
//     tel: tel.value
//   }).then(res => {
//     // console.log(res);

//     if (res.data.code == '10005') {
//       // 已存在
//       // 存在就给一个按钮可以进入到登录，或者选择重新注册
//       showConfirmDialog({
//         title: '温馨提示',
//         message: '该手机号已被注册，是否需要直接登录。',
//       })
//         .then(() => {
//           // on confirm 确定按钮，直接登录
//           router.push('/login')
//         })
//         .catch(() => {
//           // on cancel 取消按钮，可以重新 输入
//         });
//     } else {
//       // 用户不存在
//       // 不存在就直接发送验证码进入下一页面
//       showConfirmDialog({
//         title: '温馨提示',
//         message: '我们将发送验证码到您的手机上，请输入查收。',
//       })
//         .then(() => {
//           // on confirm 确定按钮，直接登录
//           // router.push('/login')
//           // 将用户手机号存起来，在后续页面中需要使用
//           localStorage.setItem('tel', tel.value)
//           // 跳转到验证码页面
//           router.push('/register/step2')
//         })
//         .catch(() => {
//           // on cancel 取消按钮，可以重新 输入
//         });
//     }
//   })





}

</script>
<template>
  <div class="my-box">
    <div class="my-cell">
      <van-field v-model="tel" label="手机号" placeholder="请输入手机号" />
    </div>

    <div class="my-button">
      <van-button :disabled="flag" type="primary" block @click="checkTel" round>下一步</van-button>
    </div>
  </div>
</template>
<style scoped lang="scss">
.my-box {
  padding: 50px 20px;
  box-sizing: border-box;
}

.my-cell {
  border: 1px solid gray;
}

.my-button {
  margin-top: 30px;
}
</style>
